<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>某个分类</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .Footprints {
            width: .46rem;
            height: .46rem;
            position: fixed;
            bottom: .72rem;
            right: .12rem;
        }

        .select-box {
            z-index: 3;
            display: none;
            width: 100%;
            height: .6rem;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            top: .86rem;
            background: #fff;
            box-shadow: #eee 1px 1px 1px 1px;
            font-size: .14rem;
        }

        .select-box.active {
            display: flex
        }

        .select-box .span-button {
            display: block;
            width: 1rem;
            text-align: center;
            border: 1px solid #eee;
        }
    </style>
</head>

<body>


    <!--正文-->
    <div class="A-classification bc-gray">
        <nav class="h-tab flex">
            <a href="javascript:;">最新上拍</a>
            <a href="javascript:;">即将截拍</a>
            <a href="javascript:;" class="active">综合</a>
            <a href="javascript:;" @click='change_type(e)'>一口价</a>
        </nav>
        <div class="b-tab">
            <div class="b-tab-1">
                <div v-for='item in new'>
                    <img :src="item.produce_head_image" alt="" style="width: 100%;height: 43vw;">
                    <ul class="clearfix">
                        <li v-for='items in item.produce' @click='link_jump_1(this)' v-if="$index<3">
                            <img :src="items.produceHeadImage" alt="">
                            <h6>{{items.produceTitle}}</h6>
                            <p><span>首发价</span><em>￥ <font>{{items.auctionSet.startingPrice}}</font>起</em></p>
                        </li>

                    </ul>
                </div>

            </div>
            <div class="b-tab-2">
                <ul>
                    <li @click='link_jump_2(this)' v-for='item in will_data'>
                        <div class="img">
                            <img :src="item.produce_head_image" alt="">
                            <p>{{item.produce_describe}}</p>
                        </div>
                        <p class="flex"><span>￥：<font>{{item.starting_price}}</font>起</span><em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em><i>加入</i></p>
                    </li>
                </ul>
  
            </div>
            <div class="b-tab-3 active">
                <ul>
                    <li v-for='item in list_1'>
                        <div class="img" @click='link_jump_3(this)'>
                            <img :src="item.produceHeadImage" alt="">
                            <p>{{item.produceDescribe}}</p>
                        </div>
                        <p class="flex"><span>￥：<font>{{item.startingPrice}}</font>起</span><em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produceGoodNum}}</em><i>加入</i></p>
                    </li>
                </ul>
            </div>
            <div class="b-tab-4">
                <ul>
                    <li v-for='item in att'>
                        <div class="img" @click='link_jump(this)'>
                            <img :src="item.produce_head_image" alt="">
                            <p>{{item.produce_describe}}</p>
                        </div>
                        <p class="flex"><span>￥：<font>{{item.produce_money}}</font></span><em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em><i>加入</i></p>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <img src="../img/足迹@2x 2.png" alt="" class="Footprints" @click='load_foot()'>

    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;"></div>

    <div class="select-box flex active" v-if='active'>
        <span class="span-button" @click='num1()'>销量</span>
        <span class="span-button" @click='num2()'>价格</span>
    </div>

    <div class="Footprints-box">
        <h5>我的足迹</h5>
        <ul>
            <li class="clearfix" v-for='item in foot'>
                <img :src="item.produceHeadImage" alt="">
                <div class="right">
                    <p class="t1">{{item.produceDescribe}}</p>
                    <p class="t2">
                        <span>￥<font>{{item.producePrice}}</font>起</span>
                        <em @click='click_link_sim(this)'>找相似</em>
                    </p>
                </div>
            </li>

        </ul>
    </div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
        $(function () {
         
            $('.h-tab a').on('click', function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active')
                $('.b-tab>div').eq(index).addClass('active').siblings().removeClass('active');
            })
            $('.Footprints').click(function () {
                $('.Footprints-box').css('right', '0');
                $('.mask').show();
            })
          
            let s_name = getQueryString('s_name')
            $('title').html(s_name)
        })
    </script>
    <script>
        $(function () {

            function getUrlParam(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); 
                var r = window.location.search.substr(1).match(reg); 
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            }
            let first = getUrlParam('firstTypeId');
            let sec = getUrlParam('secondTypeId')

            new Vue({
                el: 'body',
                data: {
                    thisurl: base_url + 'ZITAOHUI/produceType/secondType',
                    foot: [],
                    list_1: [],
                    will_data: [],
                    new: [],
                    active: false,
                    value: '2'

                },
                ready: function () {
                    this.$http.get(this.thisurl, {
                            params: {
                                firstTypeId: first,
                                secondTypeId: sec
                            }
                        })
                        .then((response) => {
                            console.log(response);
                            let all_data = response.data.extend;
                            let list_1 = all_data.list;
                            let new_produce = all_data.list2;
                            this.$set('new', new_produce)
                            this.$set('list_1', list_1)
                            console.log(this.list_1)

                        }, (response) => {
                            console.log('数据出错')
                        }).catch(function (response) {
                            console.log(response)
                        });




                    this.$http.get(base_url + 'ZITAOHUI/comingToend', {
                            params: {
                                firstType: first,
                                secondeType: sec
                            }
                        })
                        .then((response) => {
                            console.log(response)
                            let all_data = response.data.extend.list;
                            this.$set('will_data', all_data);
                            console.log(this.will_data)
                        }, (response) => {
                            console.log('数据出错')
                        })
                },
                methods: {
                    // 点击足迹加载数据
                    load_foot: function () {
                        this.$http.get(base_url + 'ZITAOHUI/foot', {
                                params: {
                                    userId: u_id,
                                }
                            })
                            .then((response) => {
                                console.log(response);
                                let all_data = response.data.extend;
                                console.log(all_data);
                                let arr = [],
                                    i = 0;
                                for (i; i < all_data.list.length; i++) {
                                    arr.push(all_data.list[i].produce)
                                }
                                console.log(arr)
                                this.$set('foot', arr)

                            }, (response) => {
                                console.log('数据出错')
                            }).catch(function (response) {
                                console.log(response)
                            })
                    },
                    // 点击找相似跳转
                    click_link_sim: function (t) {
                        console.log(t);
                        window.location.href = '../page/Similar-to-the-auction.html?value=' + t.item
                            .produceDescribe;
                    },
                    change_type: function () {
                        var vm = this;
                        setTimeout(function () {
                            if ($('.h-tab a:last-child').hasClass('active')) {


                                if (vm.active == true) {
                                    vm.active = false
                                } else if (vm.active == false) {
                                    vm.active = true
                                }

                            }
                        }, 50);



                    },
                    num1: function () {
                        this.num_all(base_url + 'ZITAOHUI/producefixedprice')

                    },
                    num2: function () {
                        this.num_all(base_url + 'ZITAOHUI/producefixemoney')

                    },
                    link_jump_3: function (t) {
                        console.log(t)
                        window.location.href = '../page/buy-info-page.3.html?s_name=' + t.item.produceDescribe +
                            '&p_id=' + t.item.produceId + '&s_id=' + t.item.storeId
                    },

                    link_jump_1: function (t) {
                        console.log(t)
                        // window.location.href = '../page/buy-info-page.3.html?s_name=' + t.items.produceTitle+ '&p_id='+t.items.produceId+'&s_id='+t.item.storeId
                    },
                    link_jump_2: function (t) {
                        console.log(t)
                        window.location.href = '../page/buy-info-page.3.html?s_name=' + t.item.produce_describe +
                            '&p_id=' + t.item.produce_id + '&s_id=' + t.item.store_id
                    },
                    num_all: function (url) {
                        this.active = false;
                        console.log(this.active)
                        if (this.value == 1) {
                            this.value = 2
                        } else if (this.value == 2) {
                            this.value = 1
                        }
                        this.$http.get(url, {
                                params: {
                                    value: this.value
                                }
                            })
                            .then((response) => {
                                console.log(response)
                                let all_data = response.data.extend.list;
                                this.$set('att', all_data)

                            }, (response) => {
                                console.log('数据出错')
                            })
                    },
                    add_good: function (t) {
                        console.log(t)

                        this.$http.get(base_url + 'ZITAOHUI/goodNum', {
                            params: {
                                produceId: t.item.produceId,
                                user_id: 1
                            }
                        }).then(
                            function (data) {
                                console.log(data)
                                let sun = data.data.extend;
                                sun = sun.haha.list;
                                if (sun == 1) {
                                    t.item.produceGoodNum += 1;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过赞啦')
                                }
                            }
                        )
                    }

                }
            })

        })
    </script>
</body>

</html>